<template>
  <div class="ve-dict">
    <el-row :gutter="10">
      <el-col class="ve-dict-label">
        {{ title }}
        <el-link style="float: right" type="primary" @click="add">添加选项</el-link>
      </el-col>
    </el-row>
    <template v-for="(o, i) in list">
      <ve-dict-item :key="i" class="mt18" :model="o" @input="input($event, i)" @remove="remove(i)" />
    </template>
  </div>
</template>
<script>
/* eslint-disable */
/**
 * @Method dict
 * @Description TODO
 * @Date 2021/1/20 11:14
 * @Created by HePing
 */
import VeDictItem from "./VeDictItem";
const defaultData = () => [{ label: "", value: "" }];
export default {
  name: "VeDict",
  components: { VeDictItem },
  model: {
    prop: "model",
  },
  props: {
    model: {
      type: Array,
      default() {
        return defaultData();
      },
    },
    config: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      datum: {
        label: "",
        value: "",
      },
    };
  },
  computed: {
    list: {
      get() {
        return this.model;
      },
    },
    title() {
      return (
        (this.config && this.config.item && this.config.item.label) ||
        "选项列表"
      );
    },
  },
  methods: {
    input(o, i) {
      this.list.splice(i, 1, o);
      this.$emit("input", this.list);
    },
    add() {
      this.$emit("input", [...this.list, ...defaultData()]);
    },
    remove(i) {
      this.list.splice(i, 1);
      this.$emit("input", this.list);
    },
  },
};
</script>
<style lang="scss" scoped>
.ve-dict {
  margin-bottom: 18px;
  .ve-dict-label {
    font-size: 14px;
    color: #606266;
  }
  .mt18 {
    margin-top: 18px;
  }
}
</style>
